<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 400px;
            height: 200px;
            border: 2px solid gold;

        }

        .child{
            width: 350px;
            height: 80px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="parent">
            <!-- 写v-model这里是不会得到对应的变化的，要用自定义事件 -->
            姓名：{{obj.name}}
            {{a}}
            <!-- event是我的一个事件，我传参就有数据 -->
            <child-com  v-bind="obj" :a="a"></child-com>
            <!-- :obj="obj"  这样写是以对象的形式把它传进来-->
            <!-- v-bind="obj"  这样就相当于 :name=name,:sex=sex -->
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>

        // 单向数据流：
        // 注意在 JavaScript 中对象和数组是通过引用传入的，
        // 所以对于一个数组或对象类型的 prop 来说，
        // 在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
        Vue.component("ChildCom",{
            // 为什么不报错
            // 因为obj是引用数据类型，父传的是数据的地址，vue检查的时候没有检查出来是直接修改父组件
            template: `<div class="child">
                         
                           <input type = "text" v-model="name">  
                           <input type = "text" v-model="a">    
                       </div>`,
                    
            // props:["obj","a"], //props是响应式的
            // 把对象拆分成这样就可以报错了
            props: ["name","sex","a"]
            
        })

        // 就是我的obj是一个引用地址，然后我给props也是一个引用地址，引用地址指向同一个堆
        // 两个引用地址指向一个堆，然后我改的是堆，所以系统没有检查出来
        var vm = new Vue({
            el: "#app",
            data: {
                a:1,
                obj:{
                    name: "jack",
                    sex: "男"
                }
            }
        })
    </script>
</body>
</html>